<script type="text/javascript">
$(document).ready(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: '<?php echo $id ?>',
      defaultSeriesType: '<?php echo $type ?>'
    },
    title: {
      text: '<?php echo $title ?>'
    },
    subtitle: {
      text: '<?php echo $subtitle ?>'
    },
    xAxis: {
        <?php if(count($seriesX)): ?>
            categories: [
              <?php foreach($seriesX as $x): ?>
              '<?php echo $x; ?>',
              <?php endforeach; ?>

            ]
        <?php endif; ?>
        },
    yAxis: {
      title: {
        text: '<?php echo $yAxisTitle ?>',
      },
      labels: {
        formatter: function() {
           return this.value;
         }
      }
    },
    tooltip: {
      formatter: function() {
        return '<?php echo  str_replace(array('%name%', '%x%', '%y%'), array("' + this.series.name + '", "' + this.x + '", "' + this.y + '"), $tooltip); ?>';
      }
    },
    plotOptions: {
      area: {
        pointStart: 0,
        marker: {
          enablUSAed: false,
          symbol: 'circle',
          radius: 2,
          states: {
            hover: {
               enabled: true
            }
          }
        }
      }
    },
    series: [
      <?php for ($i=0; $i<count($series); $i++) :?>
      {
        name: '<?php echo $series[$i]['title'] ?>',
        data: [
          <?php for ($j=0; $j<count($series[$i]['data']); $j++) :?>
            <?php echo $series[$i]['data'][$j] ?><?php if($j < count($series[$i]['data'])-1): ?>,<?php endif; ?>
          <?php endfor; ?>
        ]
      }
      <?php if($i < count($series)-1): ?>,<?php endif; ?>
        <?php endfor; ?>
      ]
  });
});
</script>

<div id="<?php echo $id ?>" style="width: <?php echo $width ?>px; height: <?php echo $height ?>px"></div>